<template>
  <div class="app-container">
      <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <!-- <el-button class="btn-add" @click="handleAddNotice()" size="mini">
        添加新公告
      </el-button> -->
    </el-card>
    <el-table ref="productTable"
                :data="list"
                style="width: 100%"
                v-loading="listLoading"
                border>
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
        <!-- <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="头像" width="120" align="center">
          <template slot-scope="scope"><img style="height: 80px" :src="scope.row.icon"></template>
        </el-table-column> -->
        <el-table-column label="公告内容" width="800" align="center">
          <template slot-scope="scope">{{scope.row.content}}</template>
        </el-table-column>
         <!-- <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">{{scope.row.status ==1?'正常':'有问题'}}</template>
        </el-table-column>
         <el-table-column label="创建时间" width="170" align="center">
          <template slot-scope="scope">{{scope.row.createTime}}</template>
        </el-table-column>
        <el-table-column label="邮箱" width="150" align="center">
          <template slot-scope="scope">{{scope.row.email}}</template>
        </el-table-column>
        <el-table-column label="备注" width="100" align="center">
          <template slot-scope="scope">{{scope.row.note}}</template>
        </el-table-column> -->
        <!-- <el-table-column label="操作" width="360" align="center">
          <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditNotice(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteNotice(scope.$index, scope.row)">删除
              </el-button>
          </template>
        </el-table-column> -->
    </el-table>
    <!-- 新增公告的弹窗 -->
    <el-dialog title="新增公告" :visible.sync="isNewNoticeOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form :model="newForm" style="width:25rem;" :rules="newFormRules" >
            <el-form-item label="公告" prop="content" required label-width="5rem">
                <el-input v-model="newForm.content" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="公告名" prop="nickName" required label-width="5rem">
                <el-input v-model="newForm.nickName" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" label-width="5rem">
                <el-input v-model="newForm.email" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="备注"  label-width="5rem">
                <el-input v-model="newForm.note" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="saveNewNotice('newForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isNewNoticeOpen = false">关闭</el-button>
        </div>
    </el-dialog>
    <!-- 编辑公告的弹窗 -->
    <el-dialog title="编辑公告" :visible.sync="isEditNoticeOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form :model="editForm" style="width:25rem;" :rules="editFormRules" >
            <el-form-item label="公告" prop="content" required label-width="5rem">
                <el-input v-model="editForm.content" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="公告名" prop="nickName" required label-width="5rem">
                <el-input v-model="editForm.nickName" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="note" label-width="5rem">
                <el-input v-model="editForm.note" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="saveNoticeInfo('editForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isEditNoticeOpen = false">关闭</el-button>
        </div>
    </el-dialog>
    <!-- 编辑公告角色的弹窗 -->
    <!-- <el-dialog title="编辑公告角色" :visible.sync="isRoleOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <div style="width:25rem;" >
          <el-checkbox-group v-model="selectedRole" @change="roleChange">
            <el-checkbox v-for="role in allRoleList" :label="role.id" :key="role.id">{{role.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="saveNoticeRoleInfo" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isRoleOpen = false">关闭</el-button>
        </div>
    </el-dialog> -->
     <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[20,40,60]"
        :current-page.sync="listQuery.pageNum"
        :total="total">
      </el-pagination>
    </div>
    
  </div>
</template>
<script>
    import {
    fetchNoticeList,
    updateNoticeInfo,
    newNoticeInfo,
    deleteNotice,
  } from '@/api/notice'

  const defaultListQuery = {
    pageNum: 1,
    pageSize: 20,
  };
  export default {
    name: "NoticeList",
    data() {
      return {
          list:[],
          listQuery:Object.assign({}, defaultListQuery),
          newForm:{//新增公告弹框里内容
            content:'',
          },
          editForm: {//编辑公告弹框里内容
            currentUId:0,
            content:'',
            // nickName:'',
            // password:'',
            // note:'',
          },
          newFormRules:{
            content:[
                { required: true,  message: '公告内容不能为空', trigger: ['blur','change']}
             ],
          },
          editFormRules:{
            content:[
                { required: true,  message: '公告内容不能为空', trigger: ['blur','change']}
             ],
            //  nickName:[
            //     { required: true,  message: '公告名不能为空', trigger: ['blur','change']}
            //  ],
          },
          currentOpeId:0,//编辑角色的当前公告id
          allRoleList:[],//所有的角色列表
          NoticeRoleId:[],//当前公告的role id
          selectedRole:[],//公告弹窗里选择的选择的role id
          isNewNoticeOpen:false,//新增公告弹窗
          isEditNoticeOpen:false,//编辑公告弹窗
          //isRoleOpen:false,//编辑角色弹窗
          total:0,
      }
    },  
    created() {
      this.getList();
     // this.getRoleList();
    },
    methods:{
      getList() {
        this.listLoading = true;
        fetchNoticeList(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total
        }).catch((err)=>{
          console.log(err)
        });
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEditNotice(index,item){
        this.isEditNoticeOpen = true;
        this.editForm.currentUId = item.id;
        this.editForm.content = item.content;
        this.editForm.nickName = item.nickName;
        this.editForm.note = item.note;
      },

      handleAddNotice(){
          this.isNewNoticeOpen = true;
      },
      
      saveNewNotice(){
          console.log(this.newForm);
          this.newForm.content = this.newForm.content;
        newNoticeInfo(this.newForm).then(response=>{
            if(response.code == 200){
                this.$message({
                  message: '新建成功',
                  type: 'success',
                  duration: 1000
              });
            this.isNewNoticeOpen=false;
            this.getList();
            }
        })
      },
      saveNoticeInfo(){
          //console.log(this.editForm);
          let passTemp= this.editForm.password;
          if (!passTemp){
            delete this.editForm.password
          }
          //console.log(this.editForm);
        updateNoticeInfo(this.editForm.currentUId,this.editForm).then(response=>{
            this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000
            });
            this.isEditNoticeOpen=false;
            this.getList();
        });
      },
      handleUpdateRole(index,item){
        console.log(item.id);
        this.currentOpeId = item.id;
        this.getCurNoticeRole();
      },
    
      handleDeleteNotice(index,item){
          let self = this;
           self.$confirm('删除该公告, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                console.log(11);
                deleteNotice(item.id).then(response=>{
                    console.log(22)
                    if(response.code === 200){
                        self.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        self.getList();
                    }
                });
            }).catch(() => {
                // self.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
      },
      
    }
  }
</script>
<style scoped>
.btn-add{
    font-size: 14px;
    padding: 10px;
    margin-top: -8px;
  color:#fff;
  background-color:#417FF6;
}
/* 弹出框的宽度 */
.adjustmentBox >>> .el-dialog{
  width: 28rem;
} 
</style>